<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>perkins</title>
  <link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold|PT+Sans+Narrow:regular,bold" rel="stylesheet">
  <link href="stylesheets/app.less" media="all" rel="stylesheet/less" />
  <script src="javascripts/less-1.0.41.js"></script>
  <script charset="utf-8">
    // Under development you should uncomment the following lines,
    // to make the browser refresh the changes that you are makeing in your app.less file.
    // less.env = "development";
    // less.watch();
  </script>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <header>
    <div class="row">
      <div class="column grid-16">
        <hgroup>
          <h1 class="logo">perkins</h1>
          <p class="slogan">Design <span class="serif">&amp;</span> Develop the Web, Faster.</p>
        </hgroup>
      </div>
    </div>
  </header>
  <div id="content">
    <div id="headings">
      <div class="row">
        <div class="column grid-12">
          <h4 class="f-h4">Headings</h4>
          <h1>h1: Lorem ipsum dolor sit amet</h1>
          <h2>h2: Lorem ipsum dolor sit amet</h2>
          <h3>h3: Lorem ipsum dolor sit amet</h3>
          <h4>h4: Lorem ipsum dolor sit amet</h4>
          <h5>h5: Lorem ipsum dolor sit amet</h5>
          <h6>h6: Lorem ipsum dolor sit amet</h6>
        </div>
        <div class="column grid-4">
          <h4 class="f-h4">Elements</h4>
          <a href="javascript:void(0);">&lt;a&gt;</a><br />
          <abbr title="Abbreviation">&lt;abbr&gt;</abbr><br />
          <address>&lt;address&gt;</address>
          <code>&lt;code&gt;</code><br />
          <del>&lt;del&gt;</del><br />
          <dfn title="Text Definition">&lt;dfn&gt;</dfn><br />
          <em>&lt;em&gt;</em><br />
          <ins>&lt;ins&gt;</ins><br />
          <kbd>&lt;kbd&gt;</kbd><br />
          <mark>&lt;mark&gt;</mark><br />
          <meter>&lt;meter&gt;</meter><br />
          <output>&lt;output&gt;</output><br />
          <progress value="50" max="100">Progress: 50</progress><br />
          <q>&lt;q&gt;</q><br />
          <s>&lt;s&gt;</s><br />
          <samp>&lt;sample&gt;</samp><br />
          <small>&lt;small&gt;</small><br />
          <span>&lt;span&gt;</span><br />
          <strong>&lt;strong&gt;</strong><br />
          <span>This is <sub>&lt;sub&gt;</sub></span><br />
          <span>This is <sup>&lt;sup&gt;</sup></span><br />
          <var>&lt;var&gt;</var><br />
          <p>This is a super<wbr />cali<wbr />fragi<wbr />listic<wbr />espi<wbr />halidous word separated by &lt;wbr&gt; tags</p>
        </div>
      </div>
    </div>
    <div id="typography">
      <div class="row">
        <div class="column grid-4">
          <h4 class="f-h4">Paragraph</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="column grid-4">
          <h4 class="f-h4">List</h4>
          <ul>
            <li>One lorem ipsum element</li>
            <li>Another dolor sit amet element</li>
            <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
            <li>
              <ul>
                <li>One lorem ipsum element</li>
                <li>Another dolor sit amet element</li>
                <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
                <li>This is the last item</li>
              </ul>
            </li>
            <li>This is the last item</li>
          </ul>
        </div>
        <div class="column grid-4">
          <h4 class="f-h4">Ordered List</h4>
          <ol>
            <li>One lorem ipsum element</li>
            <li>Another dolor sit amet element</li>
            <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
            <li>
              <ol>
                <li>One lorem ipsum element</li>
                <li>Another dolor sit amet element</li>
                <li>A longer text to demonstrate how do long text elements look, consectetuer adipiscing elit</li>
                <li>This is the last item</li>
              </ol>
            </li>
            <li>This is the last item</li>
          </ol>
        </div>
        <div class="column grid-4">
          <h4 class="f-h4">Definition Lists</h4>
          <dl>
            <dt>Element to describe</dt>
              <dd>A complete description on this element</dd>
            <dt>Another element to describe</dt>
              <dd>A complete description for this element, but using a longer text area, to show how it looks</dd>
            <dt>Element to describe</dt>
              <dd>Less text</dd>
            <dt>An element to describe</dt>
              <dd>There is a lot of text here describing an element inside the Perkins design framework. I must remind you all that the Perkins design framework is an excellent way to design the web faster.</dd>
          </dl>
        </div>
      </div>
    </div>
    <div id="paragraph">
      <div class="row">
        <div class="column grid-12">
          <h4 class="f-h4">A Blockquote</h4>
          <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </blockquote>
          <h4 class="f-h4">A block of code</h4>
          <pre>
#include &lt;stdio.h&gt;

int main(int argc, char * argv)
{
  print "Hello World\n";
  return 0;
}
          </pre>
          <h4 class="f-h4">A Paragraph</h4>
          <article>
            <h1>Sed do eiusmod tempor incididunt</h1>
            <figure class="right">
              <img src="http://lorempixum.com/200/200/technics/1" />
              <figcaption>Random Tech Image</figcaption>
            </figure>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <blockquote class="left">Excepteur sint occaecat cupidatat non proident</blockquote>
            <p>Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p class="text3Col">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </article>
          <h4 class="f-h4">A Paragraph</h4>
          <p>
            <bdo dir="rtl">
              La vida se vive hacia adelante pero solo se entiende hacia atr&aacute;s
            </bdo>
          </p>
        </div>
      </div>
    </div>
    <div id="helpers">
      <div class="row">
        <div class="column grid-16">
          <h4 class="f-h4">Simple Data Tabulation</h4>
          <table>
            <tr>
              <td>Ultra</td>
              <td>Simple</td>
              <td>Table</td>
            </tr>
            <tr>
              <td>No th elements</td>
              <td>Some more demonstration texts</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </table>
        </div>
        <div class="column grid-16">
          <h4 class="f-h4">Table with design</h4>
          <table class="table" summary="This is the summary">
            <caption>Legend</caption>
            <thead>
              <tr>
                <th scope="col">Author</th>
                <th scope="col">Code</th>
                <th scope="col">City</th>
                <th scope="col">Comment</th>
                <th scope="col">Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Diego Wolf</th>
                <td>#989238</td>
                <td>Concepcion, Chile</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                <td>
                  <a class="btn sbtn" href="javascript:void(0);">Edit</a>
                </td>
              </tr>
              <tr>
                <th>Alberto Catetas</th>
                <td>#989238</td>
                <td>Santiago, Chile</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                <td>
                  <a class="btn sbtn" href="javascript:void(0);">Edit</a>
                </td>
              </tr>
              <tr>
                <th>Jhonny Melaslavo</th>
                <td>#989238</td>
                <td>Buenos Aires, Argentina</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                <td>
                  <a class="btn sbtn" href="javascript:void(0);">Edit</a>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th scope="row">Total</th>
                <td colspan="4">3 Examples</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="column grid-16">
          <h4 class="f-h4">Text Alignment</h4>
          <p class="tal">Text to the left</p>
          <p class="tac">Text to the center</p>
          <p class="tar">Text to the right</p>
          <br />

          <h4 class="f-h4">Basic Vertical Menu (.v-menu)</h4>
          <ul class="v-menu">
            <li>
              <a href="javascript:void(0);">First link</a>
            </li>
            <li>
              <a href="javascript:void(0);">Second link</a>
            </li>
            <li>
              <a href="javascript:void(0);">Third link</a>
            </li>
          </ul>
          <hr />

          <h4 class="f-h4">Basic Horizontal Menu (.h-menu)</h4>
          <ul class="h-menu">
            <li>
              <a href="javascript:void(0);">First link</a>
            </li>
            <li>
              <a href="javascript:void(0);">Second link</a>
            </li>
            <li>
              <a href="javascript:void(0);">Third link</a>
            </li>
          </ul>
          <hr />
          <h4 class="f-h4">Basic Tab Menu (.t-menu)</h4>
          <ul class="t-menu">
            <li>
              <a href="javascript:void(0);">First link</a>
            </li>
            <li>
              <a href="javascript:void(0);">Second link</a>
            </li>
            <li>
              <a href="javascript:void(0);">Third link</a>
            </li>
          </ul>
          </div>
          <br />

          <h4 class="f-h4">Forms</h4>

          <form action="/" method="post">
            <fieldset>
              <legend>Login details</legend>
              <label for="username">Username</label>
              <input type="text" name="username" id="username" size="30" class="field required" />
              <label for="password">Password</label>
              <input type="password" name="password" id="password" size="30" class="field password required" title="Please type in your password" />
              <label for="password2">Repeat Password</label>
              <input type="password" name="password2" id="password2" size="30" class="field password required" title="Passwords must be identical" />
              <input type="submit" value="Submit" class="right" />
            </fieldset>
          </form>
          <form action="/" method="post">
            <fieldset>
              <legend>Basic options</legend>
              <label for="name">Name</label>
              <input type="text" name="name" id="name" size="30" class="field required" />
              <label for="url">URL</label>
              <input type="text" name="url" id="url" size="30" class="field required url" />
              <label for="email">Email</label>
              <input type="text" name="email" id="email" size="30" class="field required email" />
              <label for="phonenumber">Phone Number</label>
              <input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
              <label for="city">City</label>
              <select name="city" id="city" class="select">
                <option>New York</option>
                <option>London</option>
                <option>Paris</option>
                <option>Tokio</option>
                <option>Sydney</option>
              </select>
              <label for="message">Message</label>
              <textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
            </fieldset>
            <fieldset>
              <legend>More options...</legend>
              <p>Following text field uses label as a default value.</p>
              <label for="location">Where do you live?</label>
              <input type="text" name="location" id="location" size="30" class="field label" />
            </fieldset>
            <fieldset>
              <legend>... and more options</legend>
              <label><input type="radio" name="radio" value="1" checked="checked" class="radio" /> Value 1</label>
              <label><input type="radio" name="radio" value="2" class="radio" /> Value 2</label>
              <label><input type="radio" name="radio" value="3" class="radio" /> Value 3</label>
              <label><input type="checkbox" name="checkbox" value="1" checked="checked" class="required" /> Checkbox here</label>
            </fieldset>
            <div class="submit"><button type="submit">Submit</button></div>
          </form>
          
          <h4 class="f-h4">Feedback</h4>
          <p class="information">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
          <p class="error">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
          <p class="notice">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
          <p class="success">Duis aute irure dolor in reprehenderit <a href="javascript:void(0);">in voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>
          
          <hr />

          <h4 class="f-h4">Call to action buttons</h4>
          <h1><a class="btn" href="javascript:void(0);">H1 Button</a></h1>
          <h2><a class="btn" href="javascript:void(0);">H2 Button</a></h2>
          <h3><a class="btn" href="javascript:void(0);">H3 Button</a></h3>
          <a class="btn" href="javascript:void(0);">Link Button</a>
          <br />
          <a class="btn sbtn" href="javascript:void(0);">Link Button Modifier</a>
          <br />
          <small><a class="btn" href="javascript:void(0);">Small Button</a></small>
          <br />
          <button class="btn" type="button">Button</button>
        </div>
      </div>
    </div>
    <div id="demogrid">
      <div class="row">
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-3 demogrid">
          <p>3 col</p>
        </div>
        <div class="column grid-3 demogrid">
          <p>3 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-3 demogrid">
          <p>3 col</p>
        </div>
        <div class="column grid-3 demogrid">
          <p>3 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-5 demogrid">
          <p>5 col</p>
        </div>
        <div class="column grid-6 demogrid">
          <p>6 col</p>
        </div>
        <div class="column grid-5 demogrid">
          <p>5 col</p>
        </div>
        <div class="column grid-6 demogrid">
          <p>6 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-6 demogrid">
          <p>6 col</p>
        </div>
        <div class="column grid-7 demogrid">
          <p>7 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-7 demogrid">
          <p>7 col</p>
        </div>
        <div class="column grid-8 demogrid">
          <p>8 col</p>
        </div>
        <div class="column grid-8 demogrid">
          <p>8 col</p>
        </div>
        <div class="column grid-9 demogrid">
          <p>9 col</p>
        </div>
        <div class="column grid-7 demogrid">
          <p>7 col</p>
        </div>
        <div class="column grid-10 demogrid">
          <p>10 col</p>
        </div>
        <div class="column grid-6 demogrid">
          <p>6 col</p>
        </div>
        <div class="column grid-11 demogrid">
          <p>11 col</p>
        </div>
        <div class="column grid-5 demogrid">
          <p>5 col</p>
        </div>
        <div class="column grid-12 demogrid">
          <p>12 col</p>
        </div>
        <div class="column grid-4 demogrid">
          <p>4 col</p>
        </div>
        <div class="column grid-13 demogrid">
          <p>13 col</p>
        </div>
        <div class="column grid-3 demogrid">
          <p>3 col</p>
        </div>
        <div class="column grid-14 demogrid">
          <p>14 col</p>
        </div>
        <div class="column grid-2 demogrid">
          <p>2 col</p>
        </div>
        <div class="column grid-15 demogrid">
          <p>15 col</p>
        </div>
        <div class="column grid-1 demogrid">
          <p>1 col</p>
        </div>
        <div class="column grid-16 demogrid">
          <p>16 col</p>
        </div>
      </div>
    </div>
  </div>
  <footer>
    <div class="row">
      <div class="column grid-16">
        <p class="tac"><strong>perkins</strong> is under MIT License</p>
        <p class="tac"><small>Copyright &copy; 2011 - <a href="http://carloselias.cl">Carlos El&iacute;as</a> and the <strong>perkins</strong> crew</small></p>
      </div>
    </div>
  </footer>
</body>
</html>

